<template>
    <div class="sc-radio" @click="$emit('input', label)">
        <div class="sc-radio-icon" :class="className">
            <svg-icon
                class="icon-tick"
                icon-class="icon-tick"
                v-if="isChecked"
            ></svg-icon>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "ScRadio",
        props: {
            value: {
                type: [String, Number, Boolean]
            },
            label: {
                type: [String, Number, Boolean]
            }
        },
        computed: {
            className() {
                if (this.isChecked) {
                    return "is-checked";
                } else {
                    return "";
                }
            },
            isChecked() {
                return this.value == this.label;
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "@/styles/variables.scss";
    .sc-radio {
        cursor: pointer;
        user-select: none;
        white-space: break-spaces;
        line-height: 16px;
        .sc-radio-icon {
            width: 14px;
            height: 14px;
            line-height: 12px;
            margin-top: -2px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 100%;
            border: 1px solid #b2b5c7;
            margin-right: 6px;
            text-align: center;
            &.is-checked {
                border: none;
                background-color: $green;
            }
            .icon-tick {
                font-size: 8px;
            }
        }
    }
</style>